$(function () {
    /** 分页组件 **/
    Vue.component('page',{
        props:['all','cur'],
        data:function(){
            return {
                right: 9,
                left: 2
            }
        },
        template: '<div class="ui center floated pagination menu" >'+
                    '<a class="item" v-if="prev"   @click="$root.cur--"> 上一页 </a>'+
                    '<a class="item" v-for="item in pageAll" @click="btn(item)" ' +
                    ':class="{active:cur == item , ellipsis : item == \'...\'}"  track-by="$index">{{item}}</a>'+
                    '<a class="item" v-if="next"   @click="$root.cur++" > 下一页 </a>'+
                '</div>',
        computed:{
            pageAll: function(){
                var self = this;
                var page = [];
                page.push(1);
                if(self.all > 1 && self.all <= 9) {
                    self.left = 2;
                    while(self.left <= self.all){
                        page.push(self.left);
                        self.left++;
                    }
                }else if(self.all > 9) {
                    self.left = self.cur - 2;     /*左侧初始化*/
                    self.right = self.cur + 2;    /*右侧初始化*/
                    if(self.cur <= 5){           /*左右侧赋值*/
                        self.left = 2;
                        self.right = 7;
                    }else if(self.right >= self.all-1){
                        self.left = self.all - 5;
                        self.right = self.all - 1;
                    }
                    /*左边省略号*/
                    if(self.cur > 5) {
                        page.push("...");
                    }
                    /*循环数组*/
                    while(self.left <= self.right){
                        page.push(self.left);
                        self.left++;
                    }
                    /*右边省略号*/
                    if(self.right < self.all -1) {
                        page.push("...");
                    }
                    page.push(self.all);
                }
                return page;

            },
            prev:function(){
                if(this.cur == 1){
                    return false;
                }else{
                    return true;
                }
            },
            next:function(){
                if(this.cur == this.all){
                    return false;
                }else{
                    return true;
                }
            }
        },
        methods : {
            btn:function(item){
                if(item != "...") {
                    this.$root.cur = item;
                }
            },
            getData: function() {
                var self = this;
                $.ajax({
                    url: rootPath+"/content/get-dynamic-find",
                    type : 'get',
                    data : {
                        classId: this.$root.module.id,
                        pageSize: 3,
                        pageNum: this.$root.cur,
                        total: this.$root.total
                    },
                    dataType: "json",
                    success: function(result) {
                        if(result.status) {
                            self.$root.module.Content = result.data.items;
                            self.$root.all = result.data.pageCount;
                            self.$root.total = result.data.total;
                            window.location.href = "#"+self.$root.module.id+"-"+result.data.pageNum;
                        }else {
                            alert(result.error)
                        }
                    }
                });
            }
        },
        watch : {
            cur:function(){
                if(self.$root.module.id != "") {
                    this.getData();
                }
            }
        }
    });
    /** 发现模块栏目 **/
    Vue.component('module',{
        props:['module','module_id'],
        template: '<div class="select">' +
                    '<span class="text">已建栏目:</span>' +
                    '<select v-model="module_id" class="ui search dropdown">' +
                        '<option v-for="item in module" :value="item.id">{{item.name}}</option>' +
                    '</select>' +
                    '<a :href="url" target="_blank" class="content_release">内容发布</a>' +
                    '</div>',
        computed: {
            url : function() {
                if(this.module_id == "") {
                    return "#"
                }
                return rootPath+"/content/release?classId="+this.module_id;
            }
        },
        watch: {
            module_id: function(news,old) {
                this.$root.module.id = news;
                this.getData(news);
            }
        },
        methods : {
            /** 根据模块名获取所有数据 **/
            getData: function(id) {
                var self = this;
                $.ajax({
                    url: rootPath+"/content/get-dynamic-find",
                    type : 'get',
                    data : {
                        classId: id,
                        pageSize: 3
                    },
                    dataType: "json",
                    success: function(result) {
                        if(result.status) {
                            self.$root.module.Content = result.data.items;
                            self.$root.cur = result.data.pageNum;
                            self.$root.all = result.data.pageCount;
                            self.$root.total = result.data.total;
                            window.location.href= "#"+id+"-"+1;
                        }else {
                            header.Popup("alert",result.error,"");
                        }
                    }
                });
            }
        }
    });
    /** 模块具体内容 **/
    Vue.component('modulecontent',{
        props: ["module_content","all","cur"],
        template: '<div class="app_manager_list">' +
                    '<table class="ui blue  celled table">' +
                        '<thead>' +
                            '<tr>' +
                                '<th width="20%">名称</th>' +
                                '<th width="20%">作者/来源</th>'     +
                                '<th width="10%">类型</th>'     +
                                '<th width="10%">样式</th>'     +
                                '<th width="10%">日期</th>' +
                                '<th width="30%">状态</th>' +
                            '</tr>' +
                        '</thead>' +
                        '<tbody>' +
                            '<tr v-for="(item,index) in module_content">' +
                                '<td>{{item.name}}</td>'+
                                '<td>{{item.source}}</td>' +
                                '<td>{{item.type == "2" ? "广告" : "网站内容"}}</td>' +
                                '<td>{{item.style}}</td>' +
                                '<td>{{item.date}}</td>' +
                                '<td>' +
                                '<a class="ui blue button" @click="update(index,item.id,1)" v-if="typeof item.state == \'undefined\'|| item.state == 2">发布</a>' +
                                '<a class="ui orange button" @click="update(index,item.id,2)" v-if="item.state == 1 ">取消</a>' +
                                '<a class="ui red button" @click="deleteItem(index,item.id,item.photoUrl,item.contentUrl)" >删除</a>' +
                                '<a class="ui brown button" @click="edit(item.classId,item.id)"  v-if="item.state == 1">编辑</a>' +
                                '</td>' +
                            '</tr>' +
                        '</tbody>' +
                        '<tfoot v-show="all > 1">' +
                            '<tr>' +
                                '<th colspan="6">' +
                                    '<page :cur="cur" :all="all"></page>' +
                                '</th>' +
                            '</tr>' +
                        '</tfoot>' +
                    '</table>' +
                '</div>',
        methods : {
            /** 更新状态 **/
            update : function(count,id,state) {
                var self = this;
                $.ajax({
                    url: rootPath + "/content/update-dynamic-find",
                    type: 'POST',
                    data: {
                        "obj.Id" : id,
                        "obj.State": state
                    },
                    dataType: "json",
                    success: function (result) {
                        if(result.status) {
                            var callback = function(){
                                Vue.set(self.$root.module.Content[count],"state",state);
                            };
                            header.Popup("alert",result.data,callback);
                        } else {
                            header.Popup("alert",result.data,"");
                        }
                    }
                });
            },
            /** 根据id删除数据 **/
            deleteItem : function(count,id,photoUrl,contentUrl) {
                var self = this;
                var callback = function() {
                    $.ajax({
                        url: rootPath+"/content/del-dynamic-find",
                        type: "POST",
                        data: {
                            id: id,
                            photoUrl: photoUrl,
                            contentUrl: contentUrl
                        },
                        dataType: "json",
                        success: function (result) {
                            if(result.status) {
                                var callback = function() {
                                    self.$root.module.Content.splice(count,1);
                                };
                                header.Popup("alert",result.data,callback);
                            } else {
                                header.Popup("alert","操作失败!!!","");
                            }
                        }
                    });
                };
                header.Popup("confirm","确认删除吗？删除后不可恢复",callback);
            },
            /** 编辑 **/
            edit : function(classId,itemId) {                                                          /** 编辑 **/
                window.open(rootPath+"/content/release?classId="+classId+"&itemId=" + itemId);
            }
        }
    });
    new Vue({
        el : "#right",
        data : {
            all: 0,
            cur: 0,
            total: "",
            module: {
                Content: "" ,
                List: ""
            }
        },
        created: function() {
            Vue.set(this.module,"id",window.location.hash == "" ? "" : window.location.hash.substr(1).split("-")[0]);
        },
        beforeMount: function(){
            this.get_model_name();
        },
        methods: {
            /** 获取已有栏目 **/
            get_model_name: function() {
                var self = this;
                $.ajax({
                    url: rootPath+"/content/find-model-name" ,
                    type : 'get',
                    dataType: "json",
                    success: function (result) {
                        if(result.status) {
                            self.module.List = result.data.items;
                            self.cur = window.location.hash == "" ? 1 : window.location.hash.substr(1).split("-")[1];
                        } else {
                            header.Popup("alert",result.error,"");
                        }
                    }
                });
            }
        }
    })
});

